\section{定位}

在CSS中，和定位相关的常用属性有position、top、right、bottom、left、z-index。通过这些属性，设计人员可以控制元素的精确定位。

\subsection{position}
position属性用来设定对象的定位方式。它的值有：
\begin{description}
	\item [static] 对象遵循常规流。top，right，bottom，left等属性不会被应用,static是position属性的默认值。
	\item [relative] 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。
	\item [absolute] 对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
	\item [fixed] 对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
	\item [center] 对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3新增属性）
	\item [page] 盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3新增属性）
	\item [sticky] 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3新增属性）
\end{description}

其中relative和absolute方式使用较多，它们的区别可从下面的例子中看出：

\lstinputlisting{example/CSS/position.html}

上例的运行结果如下图\ref{fig:position}所示：

\begin{figure}[htb]
	\centering
	\includegraphics[width=140mm]{raw/position.png}
	\caption{相对定位、绝对定位的区别}
	\label{fig:position}
\end{figure}

需要说明的是，absolute方式定位的坐标原点默认为body元素的坐标原点，在上例中，使用绝对定位的元素虽然包含在第三个div元素中，但计算它的位置时，还是从body元素的顶部开始。

如果想要使absolte相对于所在父元素定位，则需要使父元素的position取值relative。如下例：

\lstinputlisting{example/CSS/position-absolute.html}

上例的运行结果见\ref{fig:absolute}：

\begin{figure}[htb]
	\centering
	\includegraphics[width=140mm]{raw/absolute.png}
	\caption{绝对定位的参照原点}
	\label{fig:absolute}
\end{figure}

\subsection{top、right、bottom、left}

top、right、bottom、left属性用来设置对象参照相对物顶边界向下、向左、向上、向右偏移的位置，这四个属性的值可以是正值，也可以是负值，可以是整数，也可以是百分比。必须定义position属性值为 relative 、absolute 、 fixed 、 center 、 page，此属性方可生效。

\begin{lstlisting}
top:50%;
right:10px;
bottom:100px;
left:0;
\end{lstlisting}

% \subsection{clip}

% 设置对象的可视区域。区域外的部分是透明的。这个属性将被废弃，推荐使用 clip-path 代替，在过渡阶段，仍然会存在一段时间。必须将position的值设为absolute或者fixed，此属性方可使用。

\subsection{z-index}

z-index属性用来设置对象的层叠顺序。同一个层叠上下文中，层叠级别（即z-index属性值）大的显示在上面，反之显示在下面。该属性对定义了position为 relative 、 absolute 、 fixed 、 center 、 page 、 sticky 的元素有效，如果只设定z-index属性，但不使用position属性，则z-index属性无效。例如：

\lstinputlisting{example/CSS/z-index.html}

上例中虽然为div.index4设定了z-index的值，但从运行效果（如下图\ref{fig:z-index}所示）来看，这个z-index值显然没有起作用。

\begin{figure}[htb]
	\centering
	\includegraphics{raw/z-index.png}
	\caption{z-index属性演示}
	\label{fig:z-index}
\end{figure}
